<template>
  <div>
    <button @click="comName='UserName'">账号密码填写</button>
    <button @click="comName='UserInfo'">个人信息填写</button>
    <p>下面显示注册组件:</p>

    <div class="box">
      <keep-alive>
        <component :is='comName'></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import UserName from '../components/01/UserName'
import UserInfo from '../components/01/UserInfo'
export default {
  data () {
    return {
      comName: 'UserName'
    }
  },
  components: {
    UserName,
    UserInfo
  }
}
</script>

<style>
.box {
  border: 1px solid red;
}
</style>